<template>
	<u-popup customStyle="padding: 20rpx 0;" :show="show" :round="40" @close="close" @open="open">
		<view class="tabs">
			<view @click="activeTab=item" v-for="item in tabList" :key="item" class="tab-item"
				:class="{'_active':activeTab===item}">
				{{item}}
			</view>
		</view>
		<view class="yun-content main">
			<template v-if="activeTab==='热门'">
				<view class="main-item" v-for="item in wordData" :key="item.title">
					<view class="item-title">{{item.title}}</view>
					<view class="item-content">{{item.content}}</view>
				</view>
			</template>
			<template v-if="activeTab==='生活'">
				生活
			</template>
			<template v-if="activeTab==='工作'">
				工作
			</template>
			<template v-if="activeTab==='学习'">
				学习
			</template>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				tabList: ['热门', '生活', '工作', '学习'],
				activeTab: '热门',
				wordData: [{
						title: '日程安排',
						content: '小管家模拟面试官，根据您的简历模拟面试'
					},
					{
						title: '面试神器',
						content: '小管家模拟面试官，根据您的简历模拟面试'
					},
					{
						title: '美食探家',
						content: '搜罗附近好吃好喝的，小食神就在你身边'
					},
					{
						title: '食谱厨神',
						content: '体验做法的小乐趣，抓住Ta的胃=抓住Ta的心'
					},
					{
						title: '旅游搭子',
						content: '找了搭子要A钱，AA钱帮你算明白'
					},
					{
						title: '旅游路线',
						content: '旅游，根据您的简历模拟面试'
					},
					{
						title: '人情网',
						content: '帮你创立你的人情关系网络，维系Ta So Easy'
					},
					{
						title: 'EQ提升',
						content: '高情商回复，让你人见人爱，花见花开'
					},
					{
						title: 'EQ提升2',
						content: '高情商回复，让你人见人爱，花见花开'
					},
					{
						title: 'EQ提升3',
						content: '高情商回复，让你人见人爱，花见花开'
					},
					{
						title: 'EQ提升4',
						content: '高情商回复，让你人见人爱，花见花开'
					},
				]
			}
		},
		methods: {
			close() {
				this.$emit('update:show', false)
			},
			open() {},
			hadleTab(item) {
				console.log('item', item);
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabs {
		display: flex;
		justify-content: space-around;
		border-bottom: 4rpx solid #E8EAEF;

		.tab-item {
			padding: 28rpx 20rpx;
			font-size: 30rpx;
			color: #9296A6;
			font-weight: 600;
			margin-bottom: -4rpx;

			&._active {
				color: $uni-text-color;
				border-bottom: 4rpx solid $uni-color-primary;
			}
		}
	}

	.main {
		padding-top: 30rpx;
		height: 60vh;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		align-content: flex-start;
		gap: 30rpx;
		overflow: auto;
		background-color: #fff;

		.main-item {
			width: calc(50% - 20rpx);
			border-radius: 16rpx;
			background-color: #F4F4F4;
			padding: 28rpx 24rpx;

			.item-title {
				font-size: 30rpx;
				margin-bottom: 10rpx;
			}

			.item-content {
				font-size: 26rpx;
				color: #9296A6;
			}
		}
	}
</style>